// 导入动画库
import { trigger, state, transition, style, animate, group, query, stagger } from '@angular/animations';

export const listAnimation = trigger('listAnim', [
    transition('*=>*', [
        // 使用高阶动画  query
        // 隐藏所有进场动画
        query(':enter', style({ opacity: 0 }), { optional: true }),
        // 重新定义进场动画 stagger(100 延迟100ms
        query(':enter', stagger(100, [
            animate('1s', style({ opacity: 1 })),
        ]), { optional: true }),

        // 离场动画
        query(':leave', style({ opacity: 1 }), { optional: true }),
        query(':leave', stagger(100, [
            animate('1s', style({ opacity: 0 })),
        ]), { optional: true })
    ]),
]);
